<template>
	<view class="user">
		<view class="box">
			<view class="header">
				<image src="../../static/icons/leju-logo.png" class="circle" @tap="img"  mode=""></image>
				<text class="hi" v-if="show" >Hi~</text>
				<text class="nin"  v-if="show" >您还没有登录呢</text>
				<view class="" v-if="!show">
					<text class="he">丁呵呵</text>
					<text class="dd">用户名:dpq</text>
				</view>
				
				
			</view>
			
			<view class="zhu" v-if="show">
				<button class="button1" type="default" @tap="register">注册</button>
				<button class="button2" hover-class="green" @tap="login" type="default">登录</button>
			</view>
			
			<view class="order">
				<text class="my">我的订单</text>
				<view class="line">
					
				</view>
				
				
					<view class="hz">
						<image src="../../static/icons/icon-pay.png" mode=""></image>
						<text>待付款</text>
					</view>
					<view class="hz1" @tap="look">
						<image src="../../static/icons/pay-done.png" mode=""></image>
						<text>已付款</text>
					</view>
					<view class="hz2">
						<image src="../../static/icons/icon-car.png" mode=""></image>
						<text>待收货</text>
					</view>
					<view class="hz3">
						<image src="../../static/icons/icon-done.png" mode=""></image>
						<text>已收货</text>
					</view>
					<view class="hz4" @tap="back">
						<image src="../../static/icons/icon-back.png" mode=""></image>
						<text>售后</text>
					</view>	
			</view>
			
			<view class="white">
				<view class="last1">
					<image src="../../static/icons/save.png" mode=""></image><br>
					<text class="zi1">收藏</text>
				</view>
				<view class="last2">
					<image src="../../static/icons/brand.png" mode=""></image><br>
					<text class="zi1">品牌</text>
				</view>
				<view class="last3">
					<image src="../../static/icons/article.png" mode=""></image><br>
					<text class="zi1">文章</text>
				</view>
				<view class="last4">
					<image src="../../static/icons/address.png" mode=""></image><br>
					<text class="zi1">地址</text>
				</view>
				<view class="last5">
					<image src="../../static/icons/card.png" mode=""></image><br>
					<text class="zi1">卡包</text>
				</view>
				<view class="last6">
					<image src="../../static/icons/cart2.png" mode=""></image><br>
					<text class="zi1">购物车</text>
				</view>
				<view class="last7">
					<image src="../../static/icons/kf.png" mode=""></image><br>
					<text class="zi1">客服</text>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import mix from "@/mixins/index.js"
	export default {
		data() {
			return {
				username:"",
				nicheng:"",
				show:true
			};
		},
		mixins:[mix],
		
		methods:{
			register(){
				uni.navigateTo({
					url:"./register/register"
				})
			},
			login(){
				uni.navigateTo({
					url:"./login/login"
				})
			},
			img(){
				uni.navigateTo({
					url:"./img/img"
				})
			},
			look(){
				uni.navigateTo({
					url:"./list/list"
				})
			},
			back(){
				uni.navigateTo({
					url:"./back/back"
				})
			}
			
			
		},
		onShow(){
			
	if(uni.getStorageSync("token")){
		this.show=false
	}
		},
		
		onLoad(){
			// console.log(uni.getStorageSync("token"))
			// if(uni.getStorageSync("token")){
			// 	this.show=false
			// }
		}
		
	}
</script>

<style lang="scss">
	.user{
		padding-top: var(--status-bar-height);
	}
	.green{
		background-color:#354E44;
		color: #fff;
	}
	
	.box{
		width: 100%;
		height: 1000px;
		background-color: #f1ece7;
	}
	.he{
		font-size: 24px;
		font-weight: 800;
		margin-left: 130px;
		position: relative;
		top: -70px;
	}
	.dd{
		color: #8c8c8c;
		margin-left: -70px;
		position: relative;
		top: -40px;
		
	}
	
	.circle{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		margin-top: 30px;
		margin-left: 30px;
	}
	.hi{
		position: absolute;
		top: 50px;
		margin-left: 20px;
	}
	.nin{
		position: absolute;
		top: 80px;
		margin-left: 20px;
	}
	.button1{
		width: 100px;
		height: 40px;
		border-radius: 2px;
		border: 1px solid #354E44;
		line-height: 40px;
		margin-top: 30px;
		margin-left: 80px;
	}
	
	.button2{
		width: 100px;
		height: 40px;
		border-radius: 2px;
		background-color: #354E44;
		color: #fff;
		line-height: 40px;
		margin-top: -40px;
		margin-left: 200px;
		
	}
	.order{
		width: 320px;
		height: 120px;
		background-color: #fff;
		margin-top: 30px;
		margin-left: 30px;
	}
	.my{
		font-size: 14px;
		margin-left: 20px;
		position: relative;
		top: 10px;
	}
	.line{
		width: 280px;
		height: 2px;
		background-color: lightgray;
		margin-left: 20px;
		margin-top: 20px;
	}
	.hz{
		width: 40px;
		height: 40px;
		background-color: #fff;
		margin-left: 20px;
		margin-top: 8px;
		image{
			width: 25px;
			height: 25px;
			margin-left: 8px;
		}
		text{
			font-size:12px;
			margin-left:4px;
			
		}
	}
	.hz1{
		width: 40px;
		height: 40px;
		background-color:  #fff;
		margin-left:80px;
		margin-top: -40px;
		image{
			width: 25px;
			height: 25px;
			margin-left: 8px;
		}
		text{
			font-size:12px;
			margin-left:4px;
		}
	}
	.hz2{
		width: 40px;
		height: 40px;
		background-color:  #fff;
		margin-left: 140px;
		margin-top: -40px;
		image{
			width: 25px;
			height: 25px;
			margin-left: 8px;
		}
		text{
			font-size:12px;
			margin-left:4px;
		}
	}
	.hz3{
		width: 40px;
		height: 40px;
		background-color:  #fff;
		margin-left: 200px;
		margin-top: -40px;
		image{
			width: 25px;
			height: 25px;
			margin-left: 8px;
		}
		text{
			font-size:12px;
			margin-left:4px;
		}
	}
	.hz4{
		width: 40px;
		height: 40px;
		background-color:  #fff;
		margin-left: 260px;
		margin-top: -40px;
		image{
			width: 25px;
			height: 25px;
			margin-left: 8px;
		}
		text{
			font-size:12px;
			margin-left:10px;
		}
	}
	
	.white{
		width: 320px;
		height: 600px;
		background-color: #fff;
		border-radius: 10px;
		margin-top: 30px;
		margin-left: 30px;
		overflow: hidden;
	}
	.last1{
		width: 70px;
		height: 70px;
		background-color: #fff;
		margin-top: 30px;
		margin-left: 20px;
		image{
			width: 30px;
			height: 30px;
			margin-left: 15px;
		}
		text{
			position: relative;
			top: 10px;
			margin-left: 15px;
		}
	}
	.last2{
		width: 70px;
		height: 70px;
		background-color: #fff;
		margin-top: -70px;
		margin-left: 130px;
		image{
			width: 30px;
			height: 30px;
			margin-left: 15px;
		}
		text{
			position: relative;
			top: 10px;
			margin-left: 15px;
		}
	}
	.last3{
		width: 70px;
		height: 70px;
		background-color: #fff;
		 margin-top: -70px;
		 margin-left: 240px;
		 image{
		 	width: 30px;
		 	height: 30px;
		 	margin-left: 15px;
		 }
		 text{
		 	position: relative;
		 	top: 10px;
		 	margin-left: 15px;
		 }
	}
	.last4{
		width: 70px;
		height: 70px;
		background-color: #fff;
		// margin-top: -100px;
		margin-left: 20px;
		margin-top: 80px;
		image{
			width: 30px;
			height: 30px;
			margin-left: 15px;
		}
		text{
			position: relative;
			top: 10px;
			margin-left: 15px;
		}
	}
	.last5{
		width: 70px;
		height: 70px;
		background-color: #fff;
		margin-left: 130px;
		margin-top: -70px;
		image{
			width: 30px;
			height: 30px;
			margin-left: 15px;
		}
		text{
			position: relative;
			top: 10px;
			margin-left: 15px;
		}
	}
	.last6{
		width: 70px;
		height: 70px;
		background-color: #fff;
		margin-left: 240px;
		margin-top: -70px;
		image{
			width: 30px;
			height: 30px;
			margin-left: 15px;
		}
		text{
			position: relative;
			top: 10px;
			margin-left: 15px;
		}
	}
	.last7{
		width: 70px;
		height: 70px;
		background-color: #fff;
		margin-left: 20px;
		margin-top: 80px;
		image{
			width: 30px;
			height: 30px;
			margin-left: 15px;
		}
		text{
			position: relative;
			top: 10px;
			margin-left: 15px;
		}
	}
	

</style>
